<template>
	<view class="container">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :up="upOption">
			<view class="" v-for="(message, index) in logList || []" :key="message.content.randstr ">
				<!--  -->
				<chat-message-item ref="chatMessageItem" :sort="index" :message="message"></chat-message-item>
			</view>
		</mescroll-body>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import { MessageManager } from '@/entity/MessageManager.class.js';
import chatMessageItem from '../components/chat/chat-message-item.vue';
export default {
	components: { chatMessageItem },
	mixins: [MescrollMixin], // 使用mixin
	data() {
		return {
			options: {},
			messageManager: new MessageManager(false),
			logList: [],
			upOption: {
				page: {
					num: 0,
					size: 20
				}
			}
		};
	},
	onLoad(options) {
		this.options = options;
		this.messageManager.clear();
	},
	methods: {
		upCallback(mescroll) {
			this.$u.api
				.getGroupChatLog(this.options.group_id, mescroll.num, mescroll.size)
				.then(res => {
					// const logList = res.data.log.data || [];
					let logList = (res.data.log.data || []).map(item => {
						item.username = item.from_name;
						item.avatar = item.from_avatar;
						item.id = item.from_id;
						item.type = 'group';
						item.timestamp = item.timeline;
						// return new SingleMessageItem(item);
						return item;
					});
					if (this.messageManager.log(logList)) {
						this.logList = this.messageManager.messageDataList;
					}
					setTimeout(() => {
						this.mescroll.endBySize(res.data.log.data.length, res.data.log.total);
					}, 100);
				})
				.catch(e => {
					mescroll.endErr();
				});
		}
	}
};
</script>

<style></style>
